<template>
  <div>
    {{this.purOrgId}}
    <el-popover
      v-model="showTable"
      placement="bottom-start"
      trigger="focus">
      <select-table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt" @db-row-click="rowClick" :style="'width:' + width">
      </select-table-ext>
      <el-input v-model="currentValue" placeholder="" slot="reference" clearable readonly></el-input>
    </el-popover>
  </div>
</template>
<script>
  import SelectTableExt from '../table-ext/table-ext';
  import TableIcon from '../table-ext/table-icon';
  export default {
    data() {
      return {
        currentValue:'',
        showTable: false,
        config:{ // 页面共通配置
          isPage: true, //是否分页
          isNo:true,
          prefixCls: 'select',
          tableHeight: '453',
          crudMapping:{
            query:{
              url: this.lib.config.host.masterData + '/mdata/material/query'
            }
          }
        },
        searchForm:[{ // 查询表单配置
          label: '物料编码',
          key: 'materialCode', 
          type: 'input'
        },{
          label: '物料名称',
          key: 'materialName',
          type: 'input'
        }],
        columns:[{
          label: '物料编码',
          key: 'materialCode',
          order: true,
          align: 'center'
        },{
          label: '物料名称',
          key: 'materialName',
          align: 'center'
        },{
          label: '单位',
          key: 'materialUnit',
          align: 'center'
        },{
          label: '库存单位',
          key: 'stockUnitName',
          align:'center'
        },{
          label: '集采标识',
          key: 'cpFlag',
          align:'center'
        }]}
    },
    props:{
      value: {
        type: String
      },
      width: {
        type: String,
        default: '800px'
      }
    },
    components:{
      SelectTableExt,TableIcon
    },
    // 子组件接收附件传参
    props:['purOrgId','factoryId'],
    methods: {
      rowClick(row){
        this.currentValue = row.materialName;
        this.$emit('input', row.materialName);
        this.$emit('on-selection-data', JSON.parse(JSON.stringify(row)));
        this.showTable = false;
      }
    },
    watch:{
      value(val){
        this.currentValue = val;
      },
      currentValue(val){
        if (val === '') {
          this.$emit('input', '');
          this.$emit('on-selection-data', {});
        }
      }
    }
  };
</script>
